<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <base th:href="@{/}">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/style.css" th:href="@{/css/style.css}"/>
    <style>
        .product-price {
            font-size: 28px;
            color: #007bff;
            font-weight: bold;
        }
        .btn-large {
            display: inline-block;
            padding: 14px 24px;
            font-size: 18px;
            width: 20%;
        }
    </style>
</head>
<body>
<head class="panelBar" th:replace="/common/header::header"></head>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <h2>购物车</h2>
            <table class="table">
                <thead>
                <tr>
                    <th>商品名称</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>小计</th>
                    <th>库存</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="cartItem : ${list}">
                    <td th:text="${cartItem.good.name}"></td>
                    <td th:text="${cartItem.num}"></td>
                    <td th:text="${'￥' + cartItem.good.price + 'CNY'}"></td>
                    <td th:text="${'￥' + (cartItem.good.price * cartItem.num) + 'CNY'}"></td>
                    <td>
                        <span th:text="${cartItem.good.stock}"></span>
                        <span th:if="${cartItem.good.stock eq 0}" class="text-danger">(库存不足)</span>
                        <span th:if="${cartItem.good.stock gt 0 and cartItem.good.stock lt 5}" class="text-warning">(库存短缺)</span>
                    </td>
                    <td>
                        <a th:href="@{/cart/delete/{id}(id=${cartItem.good.id})}" class="btn btn-danger btn-sm">删除</a>
                        <a class="btn btn-primary btn-sm">更改</a>
                    </td>
                </tr>
                </tbody>
            </table>

            <div class="row">
                <div class="col-md-6 offset-md-6">
                    <hr>
                    <p class="card-text">
                        <strong>总计：</strong>
                        <span class="product-price" th:text="${totalPrice}"></span>
                        CNY
                    </p>
                    <span th:if="${!canCalculate}" class="text-danger" style="margin-bottom: 5%">库存不足，无法结算</span>
                    <a th:if="${canCalculate}" th:href="@{/checkout}" class="btn btn-primary btn-large" style="margin-bottom: 5%">结算</a>

                    <a th:href="@{/}" class="btn btn-secondary">返回首页</a>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>

<head class="panelBar" th:replace="/common/footer::footer"></head>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
</html>